<template>
  <div class="shortcut">
    <div class="w">
      <div class="fl">欢迎来到电子书城！</div>
      <div class="fr">
        <ul>
          <li>
            <a @click="goToUserCenter()">我的书城</a>
          </li>
          <li class="spacer"></li>
          <li>
            <a @click="goToOrder()">我的订单</a>
          </li>
          <li class="spacer"></li>
          <li>
            <a @click="goToMessage()">消息反馈</a>
          </li>
          <li class="spacer"></li>
          <li v-if="isLogined">
            欢迎您，
            <span v-text="userName"></span>！
            <a @click="loginOut()" class="style-red">退出</a>
          </li>
          <li v-else>
            <a @click="goToLogin()">亲，请登录</a>
            <a @click="goToLogin()" class="style-red">免费注册</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isLogined: {
      type: Boolean,
      default() {
        return false;
      },
    },
    userName: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    goToLogin() {
      this.$parent.goToLogin();
    },
    goToUserCenter() {
      this.$parent.goToUserCenter();
    },
    goToOrder() {
      this.$parent.goToOrder();
    },
    goToMessage() {
      this.$parent.goToMessage();
    },
    loginOut() {
      var url = process.env.URL_HEAD + "/touser/user/page/logout";
      // var url = process.env.URL_HEAD + "/api/touser/user/page/logout";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then((response) => {
          console.log("exit login");
          location.reload();
        });
    },
  },
  mounted() {},
};
</script>

<style scoped>
/*顶部快捷导航栏*/
.shortcut {
  height: 31px;
  background-color: #f1f1f1;
  /*因为其子盒子的内容都垂直居中，故直接在父盒子给行高*/
  line-height: 31px;
}
.shortcut li {
  float: left;
}
</style>